<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>伪元素</title>
    <style>
        .father {
            width: 300px;
            height: 300px;
            background-color: pink;
           
        }

        /* 在父级元素的内容之前添加创建子元素（行元素） */
        .father::before {
            /* content属性必须添加，否则伪元素不生效 */
            content: 'I';
            color: red;
            width: 100px;
            height: 100px;
            background-color:  aqua;
            /* 其中伪元素默认为行内元素，宽高不生效 */
            /* 解决方法：1、设置为块元素2、设置为行内块元素 */
            /* display: block; */
            display: inline-block;
        }

        /* 在父级元素的内容之前添加创建子元素（行元素） */
        .father::after {
            content: 'YOU';
            color: tomato;
        }

        

    </style>
</head>
<body>
    <!-- 伪元素，通过css创建标签，装饰不重要的小图 -->

    <!-- 伪元素找到父级元素，创建子元素 -->

    <div class="father clear">
        <!-- 通过CSS添加标签 -->
        love
    </div>
</body>
</html>